<template>
	<view class="wrap">
		<u-toast ref="uToast"></u-toast>
		<view class="l-img">
			<view class="l-title">
				律师案件管理系统
			</view>
		</view>
		<view class="login-view">
			<view class="l-login">
				<form class="l-form">
					<view class="l-info">
						<u-input customStyle="padding: 60rpx 18rpx 24rpx 0;" placeholder="请输入账号" border="bottom"
							prefixIcon="account" prefixIconStyle="font-size: 24px;color: #909399" v-model="username"
							clearable></u-input>
					</view>
					<view class="l-info">
						<u-input customStyle="padding: 60rpx 18rpx 24rpx 0;" placeholder="请输入密码" border="bottom"
							prefixIcon="lock" prefixIconStyle="font-size: 24px;color: #909399" maxlength="8"
							:password="true" v-model="password" clearable></u-input>
					</view>
					<u-button @click="login()" shape="circle" color="#45c5e9">登录</u-button>
					<view class="login" @click="register()">快速注册</view>
				</form>
			</view>
		</view>
		<view class="wechat" @click="wechatLogin()">
			<u-icon name="weixin-fill" color="#4fc432" size="40"></u-icon>
			<view class="weixin-btn">微信登录</view>
		</view>
		<view class="l-buttom">
			<view class="hint">
				<u-checkbox-group>
					<u-checkbox :checked="checked" shape="circle" activeColor="#1C5AD2" size="14"
						@change="getchecked"></u-checkbox>
				</u-checkbox-group>
				<text>已阅读并同意</text>
				<text class="link" @click="privacy">《用户协议、隐私政策》</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				checked: false
			}
		},
		methods: {
			getchecked(val) {
				this.checked = val;
			},
			login() {
				const that = this;
				if (!this.username) {
					return this.$refs.uToast.show({
						message: '账号不能为空',
						type: 'default',
					})
				}
				if (!this.password) {
					return this.$refs.uToast.show({
						message: '密码不能为空',
						type: 'default',
					})
				}
				if (!this.checked) {
					return this.$refs.uToast.show({
						message: '请勾选同意协议',
						type: 'default',
					})
				}
				let data = {
					username: this.username,
					password: this.password
				}
				uni.showLoading({
					title: "登录中"
				})
				this.$sendRequest.getLogin(data).then((res) => {
					uni.hideLoading();
					if (res.code == 200) {
						uni.setStorageSync("Authorization", res.data);
						uni.switchTab({
							url: '/pages/index/index'
						})
					} else {
						this.$refs.uToast.show({
							message: res.message,
							type: 'error',
						})
					}
				}).catch(err => {
					uni.hideLoading();
				})
			},
			register() {
				this.$u.route({
					url: 'pages/login/register/register'
				})
			},
			privacy() {
				this.$u.route({
					url: 'pages/login/privacy'
				})
			},
			wechatLogin() {
				if (!this.checked) {
					return this.$refs.uToast.show({
						message: '请勾选同意协议',
						type: 'default',
					})
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.l-img {
		width: 100%;
		height: 410rpx;
		background-image: url("~@/static/images/login-bj.png");
		background-size: 100%;
		background-repeat: no-repeat;

		.l-title {
			text-align: center;
			font-size: 48rpx;
			color: #565d69;
			padding: 240rpx 0 0 0;
			font-weight: bold;
		}
	}

	.login-view {
		width: 100%;
		position: relative;
		padding-top: 24rpx;

		.l-login {
			width: 80%;
			margin: 0 auto;
			font-size: 30rpx;

			.l-form {
				zoom: 1;
			}

			.l-form:after {
				clear: both;
				display: block;
				visibility: hidden;
				height: 0;
				content: '\20';
			}
		}
	}

	.l-login /deep/ .u-button {
		font-size: 36rpx;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		font-weight: bold;
		box-shadow: 0px 0px 24px 0px rgba(28, 90, 210, 0.31);
		margin-top: 80rpx;
	}

	.l-login .uni-input-placeholder {
		color: #aeaeae;
	}

	.wechat {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 80rpx;

		.weixin-btn {
			font-size: 28rpx;
			color: #999;
		}
	}
</style>